<script lang="ts" setup>
import type { AiPromptTemplatesApi } from '#/api/ai/prompt/promptTemplates';

import { defineProps, watch } from 'vue';

import { useVbenForm } from '#/adapter/form';

import { useEffectFormSchema } from '../data';

const props = defineProps<{
  formData: AiPromptTemplatesApi.PromptTemplates;
}>();
const [EffectForm, effectFormApi] = useVbenForm({
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
    labelWidth: 80,
  },
  wrapperClass: 'grid-cols-1',
  layout: 'vertical',
  schema: useEffectFormSchema(),
  showDefaultActions: false,
});
/** 动态更新表单值 */
watch(
  () => props.formData,
  (val: any) => {
    if (!val) {
      return;
    }
    effectFormApi.setValues(val);
  },
  { immediate: true },
);

/** 暴露出表单校验方法和表单值获取方法 */
defineExpose({
  validate: async () => {
    const { valid } = await effectFormApi.validate();
    return valid;
  },
  getValues: effectFormApi.getValues,
});
</script>

<template>
  <div>
    <EffectForm />
  </div>
</template>
